import React from 'react';
import { ZliveForm } from 'zerod';
import { getControl, getOptions } from 'zerod/components/Zform/controls';
import { parseJsonToObject } from 'zerod/components/zTool';
import linkageAction from 'zerod/components/ZliveForm/linkageAction';
const getExtendComponents = () => [
    {
        label: '下拉控件',
        value: 'selections',
        // 获取此控件配置属性时的表单控件
        getFieldPropertiesFormItems({ formItemsRef, componentList, formItemsLinkAction }) {
            return [
                {
                    key: 'mode',
                    label: '模式',
                    show: false,
                    labelFocused: true,
                    // 当前控件属性控制其他属性显示/隐藏
                    linkVisibleMap: {
                        // 当mode值为single时，显示属性protos1，隐藏属性protos2
                        single: { show: ['protos1'], hide: ['protos2'] },
                        multiple: { show: ['protos2'], hide: ['protos1'] },
                        tags: { show: [], hide: ['protos1', 'protos2'] },
                    },
                    render() {
                        return (form, changeFormItems) =>
                            getControl('Radio.Group', {
                                selectList: [
                                    {
                                        label: '单选',
                                        value: 'single',
                                    },
                                    { label: '多选', value: 'multiple' },
                                    { label: '标签', value: 'tags' },
                                ],
                                onChange: (e) => {
                                    // 执行属性控件的显示/隐藏处理
                                    formItemsLinkAction({
                                        changeFormItems,
                                        formItems: formItemsRef.current,
                                        values: { mode: e.target.value },
                                        form,
                                        controlList: componentList,
                                        excludeKeys: [],
                                    });
                                },
                            });
                    },
                    options: getOptions({ required: true, initialValue: 'single' }),
                },
                {
                    key: 'protos1',
                    label: '属性值1',
                    show: false,
                    labelFocused: true,
                    linkVisibleMap: {},
                    render(form, changeFormItems) {
                        return getControl('Input');
                    },
                },
                {
                    key: 'protos2',
                    label: '属性值2',
                    show: false,
                    labelFocused: true,
                    linkVisibleMap: {},
                    render(form, changeFormItems) {
                        return getControl('Input');
                    },
                },
            ];
        },
        ZliveFormViewerControlRender: {
            getControl(field, linkages, getGroupsFn, options) {
                const extraValue = options.extraValue || {};
                const config = parseJsonToObject(field.config);
                // 通过 getFieldPropertiesFormItems 配置的属性，会在config中
                const { tagName, protos1, protos2, mode } = config;

                return (form, changeItems, item, methods) =>
                    getControl('Input', {
                        placeholder: field.placeholder,
                        ...options,
                        onChange: () => {
                            // linkageAction({
                            //     ages: linkages,
                            //     getGroupsFn,
                            //     selfItem: item,
                            //     extraValue,
                            //     getExtendComponents: field.getExtendComponents,
                            // });
                        },
                    });
            },
            getOptions(field, rules, getDefaultOptions) {
                return getDefaultOptions(field, rules);
            },
        },
        ZliveInfoViewerControlRender: {
            render({ value }) {
                return <strong>8889877</strong>;
            },
        },
    },
];
